<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Recharge;
use common\models\EmploymentRecharge;

$this->addCrumbs('雇佣管理');
$this->title = '支付雇佣金';
?>
<style>
    #designer,
    #flyer-create,
    #flyer-recharge {padding:20px;background-color:#eee;}
    #designer {line-height:30px;}
    #designer img {float:left;width:120px;height:120px;margin-right:20px;}
    #order-title {height:30px;line-height:30px;margin-bottom:30px;font-size:18px;}
    #flyer-create .form-item {margin-bottom:5px !important;background-color:#fff;}
    #flyer-create .input-title {background-color:#fff !important;}
    .input-mid {padding-left:10px !important;}
    #alipay, #wechat {position:relative;padding:10px;border:1px solid #ccc;background-color:#eee;cursor:pointer;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay .selected, #wechat .selected {position:absolute;top:50%;right:10px;width:6px;height:6px;margin-top:-6px;border-radius:10px;border:3px solid #aaa;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay.active .selected, #wechat.active .selected {border-color:#f00;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'employment-list']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form pane">
                <div class="mt-20px" id="flyer-create">
                    <div id="order-title"><i class="icon-th-list cl-red"></i> 订单信息</div>
                    <div class="form-item">
                        <div class="input-title">订单号</div>
                        <div class="input-block input-mid"><?= $employment->order_number ?></div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">设计师</div>
                        <div class="input-block input-mid"><?= $employment->designer->nickname ?></div>
                    </div>
                    <div class="form-item">
                        <div class="input-title">订单金额</div>
                        <div class="input-block input-mid"><?= Render::amount($employment->payAmount()) ?> 元</div>
                    </div>
                </div>
                <div class="mt-20px" id="flyer-recharge">
                    <div id="order-title"><i class="icon-th-list cl-red"></i> 请选择支付方式</div>
                    <div class="form-item"><div class="active" id="alipay" data-platform="<?= Recharge::PlatformAlipay ?>">支付宝<span class="selected"></span></div></div>
                    <div class="form-item"><div id="wechat" data-platform="<?= Recharge::PlatformWeChat ?>">暂时不支持微信支付<span class="selected"></span></div></div>
                    <div class="form-item">
                        <div class="input-block tr bdn">
                            <button class="flyer-button normal border-round" id="recharge-button" type="submit">立即支付</button>
                        </div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#sub-contenter" style="display:none;"><?= EmploymentRecharge::checker() ?></textarea>
                    <input type="hidden" id="platform" name="platform" value="<?= Recharge::PlatformAlipay ?>">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="search" style="display:none;">
    <?= Render::select('style', \common\models\Design::$styleSelector, null) ?>
    <select id="category"></select>
</div>
<div id="recharge-form" style="display:none;"></div>

<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script>
    var checkerClass = new checker();
    var categorierClass = new categorier();
    $(document).ready(function() {
        categorierClass.init({ fix: false, dom: '#category', data: DesignCategories, relate: DesignCategoriesRelation, start: '<?= Yii::$app->params['designCategories'] ?>' });
        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-create-json' });

        $('#alipay, #wechat').bind('click', function() {
            $('#alipay, #wechat').removeClass('active');
            $(this).addClass('active');
            $('#platform').val($(this).data('platform'));
        });
        // 名称显示
        tableHandler.renderCategory({ category: $('#designer .styles'), select: '#search select[name=style]', color: false, splite: '，', default: '--' });
        tableHandler.renderCategory({ category: $('#designer .categories'), color: false, splite: '，', default: '--', functionName: function(id) {
                return categorierClass.renderTitles(id);
            }});

        // 充值按钮
        tableHandler.requestSingle({
            button: '#recharge-button', isConfirm: false, isShadow: true, isAlert: false, isAsync: false,
            url: "<?= Url::to('@web/employer/employment-recharge?id='.$employment->id) ?>",
            beforeRequest: function(param) {
                if( ! checkerClass.validate()) {
                    layer.msg('请先填写完整招聘信息');
                    return false;
                }
                param.data = { platform: $('#platform').val() };
            },
            requestSuccess: function (param) {
                layer.confirm(param.response.message, {
                    btn: ['已支付成功', '支付遇到问题？']
                }, function() {
                    window.location.href = "<?= Url::to('@web/employer/employment-list') ?>";
                }, function() {
                    window.location.href = "<?= Url::to('@web/employer/employment-list') ?>";
                });
                var _form = $('<div>' + param.response.javascript + '</div>');
                $(_form).find('form').attr('target', '_blank');
                $('#recharge-form').append(_form);
            }
        });
    });
</script>